<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="renderer" content="webkit">
    <title>price competition</title>
    <!--公共样式-->
    <link rel='stylesheet' type="" href="../css/base.css">

    <!-- Bootstrap -->
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!--index.less,放下面以覆盖Bootstrap的css-->
    <link rel="stylesheet/less" type="text/css" href="../css/global.less"/>
    <link rel="stylesheet/less" type="text/css" href="../css/moneyctrl/moneyctrl.less"/>

    <script src="../lib/less-js/less.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.js"></script>
    <![endif]-->

</head>

<body style="min-width: 400px">
<!--头部样式-->
<header>
    <nav class="navbar">
        <span> < </span>
        <span> 省钱控-最新优惠 </span>
        <a class="app-download" href="#">
            <img src="../images/header_app.png" alt=""/>
        </a>
    </nav>
</header>
<!--搜索框-->
<nav class="navbar navbar-default search">
    <div class="container-fluid">

        <form class="navbar-form">
            <div class="row">
                <div class="form-group col-xs-10">
                    <input type="text" class="input-control" placeholder="请输入您想比价的商品">
                </div>
                <button type="submit" class="btn btn-default col-xs-2">搜索</button>
            </div>
        </form>

    </div>
</nav>
<section>
<!--商品列表-->
<ul class="goods container">

</ul>
<script id="info" type="text/html">

    {{each result as value}}
    <li class="row">
        <div class="col-xs-4 left">
            <a href="#">
                {{#value.productImgSm}}
            </a>
        </div>
        <div class="col-xs-8 right">
            <a href="#"><h4>{{value.productName}}<span class="red">{{value.productPinkage}}</span></h4></a>
            <p>{{value.productFrom}}|{{value.productTime}} <a href="#">评论</a></p>
        </div>
    </li>
    {{/each}}

</script>
    <!--分页-->
    <div class="paging container"><!-- 把row放在上旁边多出margin，页面就超出了屏幕，有了滚轮-->
        <div class="row">    <!--放在下面就好了。原因是上面的container的固定样式把下面的row包含在其中-->

            <div class="col-xs-4 pre">
                <button>上一页</button>
            </div>
            <div class="col-xs-4">
                <span class="pageCount">1/1</span>
            </div>
            <div class="col-xs-4 next">
                <button>下一页</button>
            </div>

            <!--验证栅格布局是否对 行内元素，行内块元素，块元素都有效-->
            <!--<button class="col-xs-4">上一页</button>-->

            <!--<div class="col-xs-4">哈哈</div>-->

            <!--<button class="col-xs-4">下一页</button>-->

        </div>
    </div>
</section>
<!--footer-->
<footer>
    <!--返回顶层-->
    <div class="bottom ">
        <div class="function row">
            <span class="rogin col-xs-4">登录</span>
            <span class="register col-xs-4">注册</span>
            <span class="back col-xs-4">返回顶部</span>
        </div>
        <p>
            <a href="#">手机App下载 </a>
            慢慢买手机班
            <span>--账上比价平台</span>
        <p>m.manmanbuy.com</p>
        </p>

    </div>
</footer>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>

<script src="../lib/artTemplate/template.js"></script>
<script src="../js/moneyctrl/moneyctrl.js"></script>

</body>

</html>